@use '../../../styles/mixins';

$block: '.color-table';

#{$block} {
    @include mixins.text-body-2();

    border-collapse: collapse;
    color: var(--g-color-text-secondary);

    &__color-name,
    &__step-name,
    &__color {
        padding: 0;
    }

    &__color-name {
        width: 120px;
        padding-inline-end: 20px;
        text-align: end;
        white-space: nowrap;
    }

    &__step-name {
        text-align: center;
        width: 40px;
        padding-block-end: 10px;
    }

    &__color {
        width: 40px;
        min-width: 40px;
        height: 40px;
        text-align: center;
        color: var(--g-color-text-hint);

        &_exist {
            cursor: copy;
        }
    }

    @at-root .g-root[class*='theme_light'] &__row[data-color-name^='white'] {
        background: #5c5c5c;
        color: var(--g-color-text-light-secondary);

        #{$block}__color {
            color: var(--g-color-text-light-hint);
        }
    }

    @at-root .g-root[class*='theme_dark'] &__row[data-color-name^='black'] {
        background: var(--g-color-base-light);
        color: var(--g-color-text-dark-secondary);

        #{$block}__color {
            color: var(--g-color-text-dark-hint);
        }
    }
}
